<template>
    <div class="table store sever_list">
        <div class="crumbs store_title">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>小组管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainBtn">
            <el-button type="success" @click="addGroup()">
                <i class="el-icon-plus"></i>添加小组
            </el-button>
        </div>
        <div class="container">
            <el-select style="margin-top: 10px;width: 120px;" @change="timeSelectFn" v-model="searchTime" placeholder="时间类型">
                <el-option label="下单时间" value="ORDERTIME"></el-option>
                <el-option label="操作时间" value="ORERATIONTIME"></el-option>
            </el-select>
            <el-date-picker :clearable="false" v-model="findStartTimeValue" @change="dataSelectFn" :picker-options="pickerOptDef" type="datetimerange" style="margin-bottom: 20px" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-button type="success" @click="readHua(0)" class="fr" style="margin-left: 20px">划拨计划列表</el-button>
            <el-button type="success" @click="addFn()" class="fr">
                <i class="el-icon-plus"></i>新增划拨计划
            </el-button>
            <el-table :data="list" border style="width: 100%" ref="multipleTable" show-summary :summary-method="getSummaries" @selection-change="handleSelectionChange">
                <el-table-column prop="name" label="小组名称" :filters="listname" :filter-method="filterHandler" width="180px"></el-table-column>
                <el-table-column prop="leaderName" label="组长" width="180px"></el-table-column>
                <el-table-column prop="dereceiveNum" label="客户总数"></el-table-column>
                <el-table-column prop="receiveNum" label="未跟踪"></el-table-column>
                <el-table-column prop="addWechatNum" label="加微数"></el-table-column>
                <el-table-column prop="addWechatSurpriseNum" label="额外加微数"></el-table-column>
                <el-table-column prop="invalidNum" label="无效数"></el-table-column>
                <el-table-column prop="tailAfterNum" label="跟踪数"></el-table-column>
                <el-table-column prop="rate" label="通过率"></el-table-column>
                <el-table-column prop="rateAll" label="总通过率"></el-table-column>
                <el-table-column label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="bandFn(scope.$index, scope.row)">详情</el-button>
                        <el-button size="small" type="primary" @click="editFn(scope.$index, scope.row)">修改</el-button>
                        <!--<el-button size="small" type="primary" @click="editFn(scope.$index, scope.row)">加库存</el-button>-->
                    </template>
                </el-table-column>
            </el-table>

            <!--<div class="pagination">-->
            <!--<el-pagination-->
            <!--@current-change="handleCurrentChange"-->
            <!--@size-change="handleSizeChange"-->
            <!--layout="total, prev, pager, next"-->
            <!--:total="pageNum"-->
            <!--:page-size="pageSize"-->
            <!--:current-page="cur_page">-->
            <!--</el-pagination>-->
            <!--</div>-->
        </div>

        <!-- 弹出框 -->
        <el-dialog :visible.sync="addExtendDialog" width="500px">
            <el-form label-width="100px" ref="addForm_data" :model="addForm_data" class="extend_form">
                <el-form-item label="小组名称：">
                    <el-input v-model="addForm_data.name" class="ex_input_f"></el-input>
                </el-form-item>
                <el-form-item label="组长：">
                    <el-select v-model="select_leader" filterable style="width: 200px" remote :remote-method="remoteGrop" @change="reallyGrop" @blur="blurGrop" :loading="loading">
                        <el-option v-for="item in leaderData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="门店：">
                    <div>
                        <el-select v-model="stores" filterable remote style="width: 200px" :remote-method="remoteMember" @change="reallyStore" @blur="blurStore" :loading="loading">
                            <el-option v-for="item in storeDatas" :key="item.id" :label="item.shopName" :value="item.id"></el-option>
                        </el-select>
                        <el-button type="primary" @click="addStore">
                            <i class="el-icon-plus"></i>添加
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div style="width: 300px;">
                        <el-tag v-for="tag in add_shopList" :key="tag.shopName" size="large" closable @close="delStoreNewFn(tag)" class="ex-tag">{{tag.shopName}}</el-tag>
                        <!--<el-table :data="add_shopList"  border style="width: 100%;" ref="multipleTable" @selection-change="handleSelectionChange">-->
                        <!--<el-table-column prop="shopName" label="店名">-->
                        <!--</el-table-column>-->
                        <!--<el-table-column label="操作" align="center">-->
                        <!--<template slot-scope="scope">-->
                        <!--<el-button size="small" type="primary" @click="delStoreNewFn(scope.$index, scope.row)" v-if="scope.row.new==true">删除</el-button>-->
                        <!--<el-button size="small" type="primary" @click="delStoreFn(scope.$index, scope.row)" v-else>删除</el-button>-->
                        <!--</template>-->
                        <!--</el-table-column>-->
                        <!--</el-table>-->
                    </div>
                </el-form-item>
                <el-form-item label="组员：">
                    <div>
                        <el-select v-model="members" filterable style="width: 200px" remote :remote-method="remoteMethod" @change="reallyMember" @blur="blurMemeber" :loading="loading">
                            <el-option v-for="item in memberData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                        <el-button type="primary" @click="addMembers">
                            <i class="el-icon-plus"></i>添加
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div style="width: 300px;">
                        <el-tag v-for="tag in add_counselorList" :key="tag.name" size="large" closable @close="delNewFn(tag)" class="ex-tag">{{tag.name}}</el-tag>
                        <!--<el-table :data="add_counselorList"  border style="width: 100%;" ref="multipleTable" @selection-change="handleSelectionChange">-->
                        <!--<el-table-column prop="name" label="姓名">-->
                        <!--</el-table-column>-->
                        <!--<el-table-column label="操作" align="center">-->
                        <!--<template slot-scope="scope">-->
                        <!--<el-button size="small" type="primary" @click="delNewFn(scope.$index, scope.row)" v-if="scope.row.new==true">删除</el-button>-->
                        <!--<el-button size="small" type="primary" @click="delFn(scope.$index, scope.row)" v-else>删除</el-button>-->
                        <!--</template>-->
                        <!--</el-table-column>-->
                        <!--</el-table>-->
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addExtendDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 划拨 -->
        <el-dialog :visible.sync="addNewHua" width="620px">
            <el-form label-width="130px" ref="HuaboData" :v-model="HuaboData" class="extend_form">
                <el-form-item label="计划名称：">
                    <el-input v-model="HuaboData.logName" style="width: 155px;"></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="HuaboData.promoteWishBillStatusEnum" @change="selectHuaFn" style="width: 155px;">
                        <el-option key="1" label="未跟踪" value="ACTIVATING"></el-option>
                        <el-option key="2" label="跟踪中" value="NORMAL"></el-option>
                        <el-option key="3" label="无效" value="DISABLED"></el-option>
                        <el-option key="4" label="加微" value="WECHAT"></el-option>
                        <el-option key="5" label="全部" value="ALL"></el-option>
                    </el-select>
                </el-form-item>
                <div style="width: 250px;display: inline-block">
                    <el-form-item label="划拨源小组：">
                        <el-select v-model="initiatorGroup" @change="selectInitiatorGroup" style="width: 155px;">
                            <el-option v-for="(item,key) in list" :key="key" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="划拨源：">
                        <el-select :disabled="initiatorGroup==''" v-model="HuaboData.initiatorCounselorId" @focus="selectInitiatorCounselor" @change="selectInitiatorCounselor" style="width: 155px;">
                            <el-option v-for="(item,key) in peopleData" :key="key" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="划拨源门店：">
                        <el-select :disabled="HuaboData.initiatorCounselorId==''" v-model="HuaboData.initiatorShopId" @focus="selectInitiatorStore" @change="selectInitiatorStore" style="width: 155px;">
                            <el-option v-for="(item,key) in storeData" :key="key" :label="item.shop.shopName" :value="item.shop.id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div style="width: 250px;display: inline-block">
                    <el-form-item label="目标小组：">
                        <el-select v-model="targetGroup" @change="selectTargetGroup" style="width: 155px;">
                            <el-option v-for="(item,key) in list" :key="key" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="目标人：">
                        <el-select :disabled="targetGroup==''" v-model="HuaboData.targetCounselorId" @focus="selectTargetCounselor" @change="selectTargetCounselor" style="width: 155px;">
                            <el-option v-for="(item,key) in targetData" :key="key" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="目标门店：" style="visibility: hidden">
                        <el-select :disabled="HuaboData.targetCounselorId==''" v-model="HuaboData.targetShopId" @focus="selectTargetStore" @change="selectTargetStore" style="width: 155px;">
                            <el-option v-for="(item,key) in tarStoreData" :key="key" :label="item.shop.shopName" :value="item.shop.id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item label="备注：">
                    <el-input type="textarea" v-model="HuaboData.describe" style="width: 410px;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addNewHua = false">取 消</el-button>
                <el-button type="primary" @click="saveForm()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 划拨计划列表 -->
        <el-dialog :visible.sync="readNewHua" title="划拨详情" width="1200px">
            <el-table v-if="activeShow" :data="huabo_list" ref="multipleTable" border style="width: 100%">
                <el-table-column prop="logName" label="名称"></el-table-column>
                <el-table-column prop="countNum" label="条数"></el-table-column>
                <el-table-column prop="processStatusEnum" label="状态"></el-table-column>
                <el-table-column prop="creatorName" label="创建人"></el-table-column>
                <el-table-column prop="createdTime" label="创建时间"></el-table-column>
                <el-table-column prop="remark" label="备注" width="200"></el-table-column>
                <el-table-column label="操作" align="center" width="260">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.processStatusEnum!='成功'" size="small" type="primary" @click="delFn(scope.$index, scope.row)">删除</el-button>
                        <el-button v-if="scope.row.processStatusEnum!='成功'" size="small" type="primary" @click="doFn(scope.$index, scope.row)">执行</el-button>
                        <el-button size="small" type="primary" @click="readFn(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination v-if="paginationShow" @current-change="handleoneCurrentChange" @size-change="handleoneSizeChange" layout="total, prev, pager, next" :total="huabo_one_pageNum" :page-size="huabo_one_pageSize" :current-page.sync="huabo_one_cur_page" :current-page="huabo_one_cur_page"></el-pagination>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="readNewHua = false">关 闭</el-button>
                <!-- <el-button type="primary" @click="readNewHua = false">确 定</el-button> -->
            </span>
        </el-dialog>

        <!-- 划拨计划详情 -->
        <el-dialog :visible.sync="readOneDetail" title="划拨详情" width="700px">
            <el-form label-width="120px" ref="oneHuaboData" :v-model="oneHuaboData" class="extend_form">
                <el-tabs type="border-card" v-model="huaName" @tab-click="tabsClick">
                    <el-tab-pane label="详情" name="detail">
                        <el-form-item style="margin-left: 25px" label="计划名称：">
                            <el-input disabled v-model="oneHuaboData.logName" style="width: 410px;"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-left: 25px" label="创建人：">
                            <el-input disabled v-model="oneHuaboData.creatorName" style="width: 410px;"></el-input>
                        </el-form-item>
                        <div style="width: 250px;margin-left:25px;display: inline-block">
                            <el-form-item label="状态：">
                                <el-select v-model="oneHuaboData.processStatusEnum" @change="selectHuaFn" style="width: 155px;" disabled>
                                    <el-option key="1" label="执行中" value="ACTIVATING"></el-option>
                                    <el-option key="2" label="待执行" value="WAIT"></el-option>
                                    <el-option key="3" label="成功" value="SUCCESS"></el-option>
                                    <el-option key="4" label="错误" value="ERROR"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="划拨数量：">
                                <el-input disabled v-model="oneHuaboData.countNum" style="width: 155px;"></el-input>
                            </el-form-item>
                        </div>
                        <div style="width: 250px;display: inline-block">
                            <el-form-item label="完成时间：">
                                <el-input disabled v-model="oneHuaboData.complateTime" style="width: 155px;"></el-input>
                            </el-form-item>
                            <el-form-item label="创建时间：">
                                <el-input disabled v-model="oneHuaboData.createdTime" style="width: 155px;"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item style="margin-left: 25px" label="执行结果：">
                            <span style="color: red" v-html="oneHuaboData.resultDesc"></span>
                        </el-form-item>
                        <div style="width: 250px;margin-left:25px;display: inline-block">
                            <el-form-item label="划拨源小组：">
                                <el-input disabled v-model="oneHuaboData.counselorDeptNameSource" style="width: 155px;"></el-input>
                            </el-form-item>
                            <el-form-item label="划拨源：">
                                <el-input disabled v-model="oneHuaboData.counselorNameSource" style="width: 155px;"></el-input>
                            </el-form-item>
                            <el-form-item label="划拨源门店：">
                                <el-input disabled v-model="oneHuaboData.shopNameSource" style="width: 155px;"></el-input>
                            </el-form-item>
                        </div>

                        <div style="width: 250px;display: inline-block">
                            <el-form-item label="目标小组：">
                                <el-input disabled v-model="oneHuaboData.counselorDeptNameTarget" style="width: 155px;"></el-input>
                            </el-form-item>
                            <el-form-item label="目标人：">
                                <el-input disabled v-model="oneHuaboData.counseloNameTarget" style="width: 155px;"></el-input>
                            </el-form-item>
                            <el-form-item label="目标门店：">
                                <el-input disabled v-model="oneHuaboData.shopNameTarget" style="width: 155px;"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item style="margin-left:25px" label="备注：">
                            <el-input disabled type="textarea" v-model="oneHuaboData.remark" style="width: 409px;"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="列表" name="list">
                        <el-table v-if="activeShow" :data="service_list" ref="multipleTable" border style="width: 100%">
                            <el-table-column prop="content" label="服务产品" width="150px"></el-table-column>
                            <el-table-column prop="promoteWishBillStatusEnum" label="状态"></el-table-column>
                            <el-table-column prop="promoteWishBillStatusEnumNew" label="更新状态"></el-table-column>
                            <el-table-column prop="orderTime" label="订单时间" width="150px"></el-table-column>
                            <el-table-column prop="contactInfo" label="联系方式" width="150px"></el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination v-if="paginationShow" :current-page.sync="huabo_two_cur_page" @current-change="handletwoCurrentChange" @size-change="handletwoSizeChange" layout="total, prev, pager, next" :total="huabo_two_pageNum" :page-size="huabo_two_pageSize" :current-page="huabo_two_cur_page"></el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="readOneDetail = false">关 闭</el-button>
                <!-- <el-button type="primary" @click="readOneDetail = false">确 定</el-button> -->
            </span>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog :visible.sync="ExtendetailDialog" width="700px">
            <el-form label-width="100px" ref="addForm_data" :model="addForm_data" class="extend_form">
                <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="组员" name="member">
                        <el-table v-if="activeShow" :data="add_counselorList" border ref="multipleTable" @selection-change="handleSelectionChange">
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="receiveNum" label="客户数"></el-table-column>
                            <el-table-column prop="addWechatNum" label="加微数"></el-table-column>
                            <el-table-column prop="invalidNum" label="失效数"></el-table-column>
                            <el-table-column prop="tailAfterNum" label="跟踪中"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="门店" name="store">
                        <el-table v-if="activeShow" :data="add_shopList" border ref="multipleTable" @selection-change="handleSelectionChange">
                            <el-table-column prop="shopName" label="店名"></el-table-column>
                            <el-table-column prop="receiveNum" label="客户数"></el-table-column>
                            <el-table-column prop="addWechatNum" label="加微数"></el-table-column>
                            <el-table-column prop="invalidNum" label="失效数"></el-table-column>
                            <el-table-column prop="tailAfterNum" label="跟踪中"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="readDetail">关 闭</el-button>
                <!-- <el-button type="primary" @click="readDetail">确 定</el-button> -->
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { storeAsGet, storeAsPost, storeAsPut } from "../api/api"
import { formatDate } from "../tool/tool"
import { base64, tool_confirm } from "../tool/tool"
export default {
    data() {
        return {
            //时间类型
            searchTime: "ORDERTIME",
            //列表数据
            list: [],
            listname: [],
            //分页
            pageNum: null,
            cur_page: 0,
            pageSize: 10,
            //弹窗
            addExtendDialog: false,
            ExtendetailDialog: false,
            //选择组长
            leaderID: "",
            select_leader: "",
            leaderData: [],
            //新增组员
            members: "",
            loading: false,
            //组员ID
            memberID: "",
            memberValue: "",
            isNew: false,
            memberData: [],
            add_counselorList: [],
            //新增店铺
            stores: "",
            storeID: "",
            storeValue: "",
            // isNew: false,
            storeDatas: [],
            add_shopList: [],
            //新增设置数据
            addForm_data: {
                //推广账号ID
                name: "",
                //账号名称
                leader: "",
                //落地页名称
                shopList: [],
                counselorList: []
            },
            trueForm: {},
            memId: "",
            currentRow: "",
            //详情
            activeName: "member",
            activeShow: true,
            //划拨
            addNewHua: false,
            readNewHua: false,
            huaName: "detail",
            service_list: [],
            paginationShow: true,
            readOneDetail: false,
            huabo_list: [],
            huabo_one_pageNum: null,
            huabo_one_pageSize: 10,
            huabo_one_cur_page: 1,
            huabo_two_pageNum: null,
            huabo_two_pageSize: 10,
            huabo_two_cur_page: 1,
            initiatorGroup: "",
            targetGroup: "",
            // 小组列表
            // groupData: '',
            // 人员列表
            peopleData: [],
            targetData: [],
            // 门店
            storeData: [],
            tarStoreData: [],
            oneHuaboData: {},
            // addHuaDialog:false,
            HuaboData: {
                // 计划名称
                logName: "",
                // 目标人
                targetCounselorId: "",
                // 划拨源人
                initiatorCounselorId: "",
                // 划拨源门店
                initiatorShopId: "",
                // 目标门店
                targetShopId: "",
                // 备注
                describe: "",
                // 必须为传值
                promoteWishBillStatusEnum: "",
                // 主管为空
                wishBillList: []
            },
            findStartTimeValue: "",
            startTime: "",
            endTime: ""
        }
    },
    created() {
        // this.getGroupList();
        this.dataSelectFn()
    },
    // mounted() {
    //     this.memberData = this.states.map(item => {
    //         return { value: item, label: item };
    //     });
    // },
    computed: {},
    methods: {
        //列表展示
        getGroupList() {
            storeAsGet(
                "counselorDept/list?direction=DESC&propertys=name&startTime=" +
                    this.startTime +
                    "&endTime=" +
                    this.endTime +
                    "&timeType=" +
                    this.searchTime
            )
                .then(res => {
                    console.log(res, "101")
                    // 赋值
                    this.list = res.data.content.list

                        this.salcTotalObj = {
                                addWechatNumAll : 0,
                                dereceiveNumAll : 0,
                                invalidNumAll : 0,
                                receiveNumAll: 0,
                                tailAfterNumAll: 0,
                                addWechatSurpriseNumAll: 0,
                        }
                    Array.prototype.slice.call(this.list).forEach((value, index) => {
                            value.dereceiveNum = value.receiveNum + value.addWechatNum + value.invalidNum + value.tailAfterNum + value.addWechatSurpriseNum
                            let rateMon = value.dereceiveNum - value.invalidNum
                                
                                this.salcTotalObj.addWechatNumAll += value.addWechatNum
                                this.salcTotalObj.addWechatSurpriseNumAll += value.addWechatSurpriseNum
                                this.salcTotalObj.dereceiveNumAll += value.dereceiveNum
                                this.salcTotalObj.invalidNumAll += value.invalidNum
                                this.salcTotalObj.tailAfterNumAll += value.tailAfterNum
                                this.salcTotalObj.receiveNumAll += value.receiveNum

                            if (rateMon == 0 || value.dereceiveNum == 0) {
                                value.rate = Number(0).toFixed(2) + "%"
                                value.rateAll = Number(0).toFixed(2) + "%"
                            } else {
                                value.rate = Number(((value.addWechatNum + value.addWechatSurpriseNum) / (value.dereceiveNum -  value.invalidNum)) * 100).toFixed(2) + "%"
                                value.rateAll = Number(((value.addWechatNum + value.addWechatSurpriseNum) / value.dereceiveNum) * 100).toFixed(2) + "%"
                            }
                        })
                    this.listname = []
                    this.list.map(item => {
                        this.listname.push({
                            text: item.name,
                            value: item.name
                        })
                    })
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        // 时间类型
        timeSelectFn(val) {
            this.searchTime = val
            this.getGroupList()
        },
        filterHandler(value, row, column) {
            const property = column["property"]
            return row[property] === value
        },
        //新增划拨计划
        selectHuaFn() {},
        selectInitiatorGroup() {
            this.HuaboData.initiatorCounselorId = ""
        },
        selectInitiatorCounselor() {
            this.HuaboData.initiatorShopId = ""
            storeAsGet(
                "counselor/list/deptId?counselorDeptId=" + this.initiatorGroup
            )
                .then(res => {
                    this.peopleData = res.data.content.list
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        selectInitiatorStore() {
            storeAsGet(
                "counselor/detail/shop/list?counselorId=" +
                    this.HuaboData.initiatorCounselorId
            )
                .then(res => {
                    this.storeData = res.data.content.detail
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        selectTargetGroup() {
            this.HuaboData.targetCounselorId = ""
        },
        selectTargetCounselor() {
            this.HuaboData.targetShopId = ""
            storeAsGet(
                "counselor/list/deptId?counselorDeptId=" + this.targetGroup
            )
                .then(res => {
                    // console.log(res,"471")
                    this.targetData = res.data.content.list
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        selectTargetStore() {
            storeAsGet(
                "counselor/detail/shop/list?counselorId=" +
                    this.HuaboData.targetCounselorId
            )
                .then(res => {
                    // console.log(res,"480")
                    this.tarStoreData = res.data.content.detail
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        // 以上为组-人-店关联
        addFn() {
            this.addNewHua = true
            this.HuaboData = {
                logName: "",
                // 目标人
                targetCounselorId: "",
                // 划拨源人
                initiatorCounselorId: "",
                // 划拨源门店
                initiatorShopId: "",
                // 目标门店
                targetShopId: "",
                // 备注
                describe: "",
                // 必须为传值
                promoteWishBillStatusEnum: "",
                // 主管为空
                wishBillList: []
            }
        },
        // 新增
        saveForm() {
            console.log(this.HuaboData, "522")
            // 去除目标门店，把源门店赋给目标门店
            this.HuaboData.targetShopId = this.HuaboData.initiatorShopId
            storeAsPost(this.HuaboData, "/promote/transFrom/log/detail")
                .then(res => {
                    this.addNewHua = false
                    this.$message.success(`新建成功`)
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        //划拨计划列表
        readHua(curPage) {
            if (curPage == 0) {
                this.activeShow = false
                this.paginationShow = false
                this.$nextTick(function() {
                    this.activeShow = true
                    this.huabo_one_cur_page = 1
                    this.paginationShow = true
                })
            }
            let filters = {
                formatDate(time) {
                    let date = new Date(time)
                    return formatDate(date, "yyyy-MM-dd hh:mm:ss")
                }
            }
            storeAsGet(
                "promote/transFrom/log/page/self?page=" + curPage + "&size=10"
            )
                .then(res => {
                    this.readNewHua = true
                    // console.log(res,"480")
                    this.huabo_one_pageNum = res.data.content.page.totalElements
                    this.huabo_list = res.data.content.page.content
                    Array.prototype.slice
                        .call(this.huabo_list)
                        .forEach((value, index) => {
                            value.createdTime = filters.formatDate(
                                value.createdTime
                            )
                            switch (value.processStatusEnum) {
                                case "ACTIVATING":
                                    value.processStatusEnum = "执行中"
                                    break
                                case "WAIT":
                                    value.processStatusEnum = "待执行"
                                    break
                                case "SUCCESS":
                                    value.processStatusEnum = "成功"
                                    break
                                case "ERROR":
                                    value.processStatusEnum = "错误"
                                    break
                            }
                        })
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        // 分页导航(计划列表)
        handleoneCurrentChange(val) {
            this.huabo_one_cur_page = val
            this.readHua(val - 1)
        },
        handleoneSizeChange(val) {
            // console.log(val,111111)
        },
        delFn(index, row) {
            tool_confirm(this, "是否要删除此条划拨计划？")
                .then(res => {
                    storeAsPut(
                        "/promote/transFrom/log/detail/delete?promoteWishBillTransFromLogId=" +
                            row.id
                    )
                        .then(res => {
                            this.$message.success(`删除成功`)
                            this.readHua(0)
                        })
                        .catch(errors => {
                            this.$message.error(errors.response.data.detail)
                        })
                })
                .catch(() => {
                    console.log("取消")
                })
        },
        doFn(index, row) {
            tool_confirm(this, "是否要执行此条划拨计划？")
                .then(res => {
                    let formObj = {
                        promoteWishBillTransFromLogId: row.id
                    }
                    console.log(formObj, "formObj")
                    storeAsPost(
                        formObj,
                        "promote/transFrom/log/excute?promoteWishBillTransFromLogId=" +
                            row.id
                    )
                        .then(res => {
                            this.$message.success(`执行成功`)
                            this.readHua(this.huabo_one_cur_page - 1)
                        })
                        .catch(errors => {
                            this.$message.error(errors.response.data.detail)
                        })
                })
                .catch(() => {
                    console.log("取消")
                })
        },
        //划拨计划单条数据详情
        readFn(index, row) {
            this.activeShow = false
            this.$nextTick(function() {
                this.activeShow = true
            })
            let filters = {
                formatDate(time) {
                    let date = new Date(time)
                    return formatDate(date, "yyyy-MM-dd hh:mm:ss")
                }
            }
            this.huaName = "detail"
            this.logId = row.id
            console.log(index, row.id, "765")
            storeAsGet("promote/transFrom/log?id=" + row.id)
                .then(res => {
                    this.readOneDetail = true
                    this.oneHuaboData = res.data.content.entity
                    if (this.oneHuaboData.complateTime) {
                        this.oneHuaboData.complateTime = filters.formatDate(
                            this.oneHuaboData.complateTime
                        )
                    }
                    this.oneHuaboData.createdTime = filters.formatDate(
                        this.oneHuaboData.createdTime
                    )
                    // console.log(this.oneHuaboData,"480")
                    this.readDetailList(0)
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
            console.log("readFn")
        },

        //划拨计划单条服务列表
        readDetailList(curPage) {
            if (curPage == 0) {
                this.activeShow = false
                this.paginationShow = false
                this.$nextTick(function() {
                    this.activeShow = true
                    this.huabo_two_cur_page = 1
                    this.paginationShow = true
                })
            }
            let filters = {
                formatDate(time) {
                    let date = new Date(time)
                    return formatDate(date, "yyyy-MM-dd hh:mm:ss")
                }
            }
            storeAsGet(
                "promote/transFrom/page?page=" +
                    curPage +
                    "&size=10&promoteWishBillTransFromLogId=" +
                    this.logId
            )
                .then(res => {
                    this.readOneDetail = true
                    console.log(res, "480")
                    this.service_list = res.data.content.page.content
                    this.huabo_two_pageNum = res.data.content.page.totalElements
                    Array.prototype.slice
                        .call(this.service_list)
                        .forEach((value, index) => {
                            value.orderTime = filters.formatDate(
                                value.orderTime
                            )
                            switch (value.promoteWishBillStatusEnum) {
                                case "ACTIVATING":
                                    value.promoteWishBillStatusEnum = "未跟踪"
                                    break
                                case "NORMAL":
                                    value.promoteWishBillStatusEnum = "跟踪中"
                                    break
                                case "DISABLED":
                                    value.promoteWishBillStatusEnum = "无效"
                                    break
                                case "WECHAT":
                                    value.promoteWishBillStatusEnum = "加微"
                                    break
                            }
                            switch (value.promoteWishBillStatusEnumNew) {
                                case "ACTIVATING":
                                    value.promoteWishBillStatusEnumNew =
                                        "未跟踪"
                                    break
                                case "NORMAL":
                                    value.promoteWishBillStatusEnumNew =
                                        "跟踪中"
                                    break
                                case "DISABLED":
                                    value.promoteWishBillStatusEnumNew = "无效"
                                    break
                                case "WECHAT":
                                    value.promoteWishBillStatusEnumNew = "加微"
                                    break
                            }
                        })
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        //分页导航(服务产品列表)
        handletwoCurrentChange(val) {
            this.huabo_two_cur_page = val
            this.readDetailList(val - 1)
        },
        handletwoSizeChange(val) {
            // console.log(val,111111)
        },
        tabsClick(tab, event) {
            this.activeShow = false
            this.$nextTick(function() {
                this.activeShow = true
            })
            // console.log(tab, event,"handleClick");
        },
        //划拨计划结束
        dataSelectFn(data) {
            //日期搜索预约列表
            let startTime =
                formatDate(new Date(), "yyyy-MM-dd hh:mm:ss").substring(0, 10) +
                " 00:00:00"
            let endTime = formatDate(new Date(), "yyyy-MM-dd hh:mm:ss").substring(0, 10) + " 23:59:59"
            if (!data) {
                let data = []
                data[0] = startTime
                data[1] = endTime
                this.startTime = data[0]
                this.endTime = data[1]
                this.findStartTimeValue = data
            } else {
                this.startTime = formatDate(data[0], "yyyy-MM-dd hh:mm:ss")
                this.endTime = formatDate(data[1], "yyyy-MM-dd hh:mm:ss")
            }
            this.getGroupList()

            console.log(this.findStartTimeValue, "findStartTimeValue")
        },
        // 获取组长列表
        remoteGrop(query) {
            console.log(query, "query")
            if (query !== "") {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                    storeAsGet("/counselor/list/name?name=" + query)
                        .then(res => {
                            // console.log(res,"id")
                            this.leaderData = res.data.content.list
                        })
                        .catch(errors => {
                            this.$message.error(errors.response.data.detail)
                        })
                }, 200)
            } else {
                this.leaderData = []
            }
        },
        reallyGrop(e) {
            // this.loading = false;
            this.leaderID = e
            console.log(e, "val")
        },
        blurGrop(e) {
            // console.log(e.target.value,970)
            // this.leaderID = e.target.value;
            this.select_leader = e.target.value
        },
        handleClick(tab, event) {
            this.$nextTick(function() {
                this.activeShow = true
            })
            // console.log(tab, event,"handleClick");
        },
        readDetail() {
            this.ExtendetailDialog = false
            this.activeName = "member"
            this.activeShow = false
        },
        //查看详情
        bandFn(e, val) {
            this.activeShow = false
            this.$nextTick(function() {
                this.activeShow = true
            })
            storeAsGet("/counselorDept/detail?counselorDeptId=" + val.id)
                .then(res => {
                    // console.log(res,"id")
                    this.addForm_data = res.data.content.detail
                    this.leaderID = res.data.content.detail.leader
                    this.select_leader = res.data.content.detail.leaderName
                    this.add_counselorList = res.data.content.detail.counselorList
                    this.add_shopList = res.data.content.detail.shopList
                    this.ExtendetailDialog = true
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
            // console.log(e,val)
        },
        // 添加小组
        addGroup() {
            this.addExtendDialog = true
            this.ifEdit = false
            this.addForm_data = {}
            this.add_counselorList = []
            this.add_shopList = []
            ;(this.leaderID = ""), (this.select_leader = "")
            this.members = ""
            this.memberID = ""
            this.memberValue = ""
            this.stores = ""
            this.storeID = ""
            this.storeValue = ""
        },
        // 查询组员
        remoteMethod(query) {
            // console.log(query,"query")
            if (query !== "") {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                    storeAsGet("/counselor/list/name?name=" + query)
                        .then(res => {
                            // console.log(res,"id")
                            this.memberData = res.data.content.list
                        })
                        .catch(errors => {
                            this.$message.error(errors.response.data.detail)
                        })
                }, 200)
            } else {
                this.memberData = []
            }
        },
        reallyMember(e) {
            this.memberID = e
            // console.log(e,"val")
        },
        blurMemeber(e) {
            this.memberValue = e.target.value
        },
        // 添加组员
        addMembers() {
            let obj = {}
            let hash = {}
            if (this.memberID != "" && this.memberValue != "") {
                // console.log(this.memberID,this.memberValue);
                obj.id = this.memberID
                obj.name = this.memberValue
                obj.new = !this.isNew
                this.add_counselorList.push(obj)
                this.add_counselorList = this.add_counselorList.reduce(
                    (item, next) => {
                        hash[next.id]
                            ? ""
                            : (hash[next.id] = true && item.push(next))
                        return item
                    },
                    []
                )
                // console.log(this.add_counselorList,"add_shopList352")
                this.members = ""
                this.memberID = ""
                this.memberValue = ""
            }
        },
        // 删除组员
        delNewFn(tag) {
            // console.log(tag,"tag")
            if (tag.new) {
                if (this.add_counselorList) {
                    for (const i in this.add_counselorList) {
                        if (this.add_counselorList[i].id == tag.id) {
                            this.add_counselorList.splice(i, 1)
                        }
                    }
                }
            } else {
                storeAsPut(
                    "/counselorDept/detail/delete/counselor?counselorDeptId=" +
                        this.memId +
                        "&counselorId=" +
                        tag.id
                )
                    .then(res => {
                        if (this.add_counselorList) {
                            for (const i in this.add_counselorList) {
                                if (this.add_counselorList[i].id == tag.id) {
                                    this.add_counselorList.splice(i, 1)
                                }
                            }
                        }
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            }
        },

        remoteMember(query) {
            // console.log(query,"query")
            if (query !== "") {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                    storeAsGet("/shop/name?shopName=" + query)
                        .then(res => {
                            // console.log(res,"id")
                            this.storeDatas = res.data.content.list
                        })
                        .catch(errors => {
                            this.$message.error(errors.response.data.detail)
                        })
                }, 200)
            } else {
                this.storeDatas = []
            }
        },
        reallyStore(e) {
            this.storeID = e
            // console.log(e.target,"val")
        },
        blurStore(e) {
            this.storeValue = e.target.value
        },
        //添加门店
        addStore() {
            this.members = ""
            this.stores = ""
            // this.ifEdit = false;
            // console.log(name,id);
            let obj = {}
            let hash = {}
            if (this.storeID != "" && this.storeValue != "") {
                // console.log(this.storeID,this.storeValue);
                obj.id = this.storeID
                obj.shopName = this.storeValue
                obj.new = !this.isNew
                this.add_shopList.push(obj)
                this.add_shopList = this.add_shopList.reduce((cur, next) => {
                    hash[next.id]
                        ? ""
                        : (hash[next.id] = true && cur.push(next))
                    return cur
                }, [])
                // console.log(this.add_shopList,"360");
                this.stores = ""
                this.storeID = ""
                this.storeValue = ""
            }
        },
        // 删除组员（纯前端）
        delStoreNewFn(tag) {
            // console.log(tag,"delFn")
            if (tag.new) {
                if (this.add_shopList) {
                    for (const i in this.add_shopList) {
                        if (this.add_shopList[i].id == tag.id) {
                            this.add_shopList.splice(i, 1)
                        }
                    }
                }
            } else {
                storeAsPut(
                    "/counselorDept/detail/delete/shop?counselorDeptId=" +
                        this.memId +
                        "&shopId=" +
                        tag.id
                )
                    .then(res => {
                        // console.log(res,"439")
                        if (this.add_shopList) {
                            for (const i in this.add_shopList) {
                                if (this.add_shopList[i].id == tag.id) {
                                    this.add_shopList.splice(i, 1)
                                }
                            }
                        }
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            }
        },

        // 修改
        editFn(e, val) {
            // console.log(e,val,"495")
            this.ifEdit = true
            this.memId = val.id
            this.members = ""
            this.stores = ""
            storeAsGet("/counselorDept/detail?counselorDeptId=" + val.id)
                .then(res => {
                    // console.log(res.data.content.detail.counselorList,"id")
                    this.addForm_data = res.data.content.detail
                    this.addExtendDialog = true
                    this.leaderID = res.data.content.detail.leader
                    this.select_leader = res.data.content.detail.leaderName
                    this.add_counselorList =
                        res.data.content.detail.counselorList
                    this.add_shopList = res.data.content.detail.shopList
                    this.ifEdit = true
                })
                .catch(errors => {
                    this.$message.error(errors.response.data.detail)
                })
        },
        // 保存编辑
        saveEdit() {
            // console.log(this.ifEdit,"this.ifEdit");
            if (this.ifEdit) {
                let arr = []
                this.add_shopList.map(item => {
                    arr.push({ id: item.id })
                })
                let hash = {}
                let arr2 = []
                // console.log(this.add_counselorList,"595")
                this.add_counselorList.map(item => {
                    arr2.push({ id: item.id })
                })
                arr2.push({ id: this.leaderID })
                // console.log(arr2,"arr2")
                arr2 = arr2.reduce((item, next) => {
                    hash[next.id]
                        ? ""
                        : (hash[next.id] = true && item.push(next))
                    return item
                }, [])
                this.trueForm = {
                    name: this.addForm_data.name,
                    leader: this.leaderID,
                    shopList: arr,
                    counselorList: arr2
                }
                // console.log(this.trueForm,"trueForm")
                storeAsPut(
                    "/counselorDept/detail?counselorDeptId=" + this.memId,
                    this.trueForm
                )
                    .then(res => {
                        this.addExtendDialog = false
                        this.$message.success(`修改成功`)
                        this.getGroupList()
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            } else {
                let arr = []
                this.add_shopList.map(item => {
                    arr.push({ id: item.id })
                })
                let hash = {}
                let arr2 = []
                // console.log(this.add_counselorList,"473")
                this.add_counselorList.map(item => {
                    arr2.push({ id: item.id })
                })
                if (!this.ifEdit) {
                    arr2.push({ id: this.leaderID })
                }
                // console.log(arr2,"arr2")
                arr2 = arr2.reduce((item, next) => {
                    hash[next.id]
                        ? ""
                        : (hash[next.id] = true && item.push(next))
                    return item
                }, [])
                this.trueForm = {
                    name: this.addForm_data.name,
                    leader: this.leaderID,
                    shopList: arr,
                    counselorList: arr2
                }
                storeAsPost(this.trueForm, "/counselorDept/detail")
                    .then(res => {
                        this.addExtendDialog = false
                        // console.log(res,"383res")
                        this.$message.success(`添加成功`)
                        this.getGroupList()
                    })
                    .catch(errors => {
                        this.$message.error(errors.response.data.detail)
                    })
            }

            // console.log(this.trueForm,"trueForm")
        },
        // 改变是否启用状态
        showStatus(e) {
            // console.log(e,"启用")
        },

        handleSelectionChange(val) {
            // console.log(val,"handleSelectionChange")
            // this.multipleSelection = val;
        },
        /* 重写计算总数 */
        getSummaries(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计"
                    return
                }
                if(column.property == 'landPageUrl'){
                    sums[index] = ""
                    return
                }
                
                /* 计算成交率的 key 标识 */
                if (column.property == "rate" || column.property == "rateAll") {
                    let totalObj = this.salcTotalObj
                    console.log(totalObj)
                    if(!totalObj){
                        return false
                    }
                    let temp = totalObj.dereceiveNumAll - totalObj.invalidNumAll
                    let tempAll = totalObj.dereceiveNumAll
                    if(column.property == "rate"){
                        console.log()
                        if(temp == 0){
                            sums[index] = '0.00%'
                            return 
                        }
                        sums[index] = Number(((totalObj.addWechatNumAll + totalObj.addWechatSurpriseNumAll) / temp) * 100 ).toFixed(2) + "%"
                                
                    }else{
                        if(tempAll == 0){
                            sums[index] = '0.00%'
                            return 
                        }
                        sums[index] = Number(((totalObj.addWechatNumAll + totalObj.addWechatSurpriseNumAll) / tempAll) * 100).toFixed(2) + "%"
                    }
                    return
                }
                const values = data.map(item => Number(item[column.property]))
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr)
                        if (!isNaN(value)) {
                            return prev + curr
                        } else {
                            return prev
                        }
                    }, 0)
                    sums[index] += ""
                } else {
                    sums[index] = ""
                }
            })

            return sums
        },
    }
}
</script>

<style scoped>
.store {
    position: relative;
}
.store .store_title {
    height: 40px;
}
.store .store_title div {
    line-height: 40px;
}
.store .mainBtn {
    position: absolute;
    right: 0;
    top: 0;
}
.extend_form .ex_input {
    width: 300px;
}
.ex_input_city {
    width: 150px;
}
.ex_parent {
    padding: 10px;
    border: 1px solid #c0ccda;
    margin: 5px 0;
}
.ex_parent > div {
    padding: 10px;
    padding-left: 0;
    padding-top: 0;
}
.ex_input_f,
.ex_input_y {
    width: 200px;
}
.ex_input_tip {
    display: inline-block;
    font-size: 12px;
    color: red;
}
.ex-tag {
    font-size: 14px;
    margin-right: 5px;
    margin-bottom: 5px;
}
</style>
